<style>
    #mask{  background-color:#ccc;  opacity:0.5;  filter: alpha(opacity=50);  position:absolute;  left:0;  top:0;  z-index:1000;}
    #login{  position:fixed;  width: 650px;  height: 250px; padding: 45px 20px 0 20px;  z-index:1001;  background: white;  border-radius: 15px;}
    video{width: 250px;}
    .clearfix:after {clear: both;}
    .clearfix:before, .clearfix:after {content: " "; display: table;}
    .delete-btn{display: none;}
    .js-video-w{display: inline-block; margin-right: 15px;}
    .js-video-w:hover .delete-btn{display: block;}
</style>
<div class="weui-flex" style="min-height:400px;">
    <div class='weui-flex__item console-panel bg-blur-white'>
        <div class="weui-cells__title">网站视频管理</div>
        <div class="weui-cells">
            <div class="weui-cell__bd">
                <div class="weui-uploader__hd">
                    <p class="weui-uploader__title" style='color:darkgreen'><i  class='weui-icon weui-icon-success weui-icon-original'></i> <span class='bc-swiper-loading'>已经上传的视频</span> <small mute>点击查看视频链接</small></p>
                </div>
                <div id="" class="weui-uploader__bd">
                    <div id="video-list" class=" bc-list" data-port="http://api.hongyanche.com/marketing_admin/video_list">
                        <!--{include file="console:marketing-home-swiper-list-template" /}-->
                        <div class="bc-list-template">
                            <div style='cursor: pointer; position: relative; width: 250px;' class="clearfix js-video-w">
                                <video src=""></video>
                                <videourl list=1 class="js-video hidden">
                                </videourl>
                                <input class="weui-input" type="text">
                                <div class="delete-btn" style="position: absolute; right: 0; top: 0; font-size: 30px">
                                    <video_id list=1 class="hidden"></video_id>
                                    <i class="weui-icon weui-icon-cancel weui-icon-original"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-cells">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title"><span class='bc-swiper-loading'>上传视频文件 <small mute>限制最大1024M</small></span></p>
                    </div>
                    <div id="swiper-list-inactive" class="weui-uploader__bd ">
                        <!-- <div class="weui-uploader__file bc-rank-loading">
                            <div class="weui-uploader__file-content">
                                <div class="weui-loading"></div>
                            </div>
                        </div> -->
                        <div class="">
                            <progress></progress><br/>
                            <p id="progress">0 bytes</p>
                            <p id="info"></p>
                        </div>
                        <div class="weui-uploader__input-box" style="width: 225px; ">
                            <input id="upload-file" autocomplete='off' class="weui-uploader__input" type="file" multiple="" ／>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<sss>
    (function (w, u) {
        function openNew() {
            //获取页面的高度和宽度
            var sWidth=document.body.scrollWidth;
            var sHeight=document.body.scrollHeight;
            //获取页面的可视区域高度和宽度
            var wHeight=document.documentElement.clientHeight;
            var oMask=document.createElement("div");
            oMask.id="mask";
            oMask.style.height=sHeight+"px";
            oMask.style.width=sWidth+"px";
            document.body.appendChild(oMask);
            var oLogin=document.createElement("div");
            oLogin.id="login";
            oLogin.innerHTML="<div class='loginCon'><div id='close' style='position: absolute; right: 0; top: 0;'><i class='weui-icon weui-icon-cancel weui-icon-original' style='font-size: 25px;'></i></div></div>";
            document.body.appendChild(oLogin);
            //获取登陆框的宽和高
            var dHeight=oLogin.offsetHeight;
            var dWidth=oLogin.offsetWidth;
            //设置登陆框的left和top
            oLogin.style.left=sWidth/2-dWidth/2+"px";
            oLogin.style.top=wHeight/2-dHeight/2+"px";
            $(oLogin).append('<h1>视频是否需要转码？</h1>视频格式为mp4 h264标准格式，其余格式均需要转码，转码将大量消耗服务器资源，建议本地转码后上传。<div class="weui-cells"><div class="weui-cell"><div style="width: 40%; margin-right: 20%;"><button id="btn-yes" style="background-color: #999; cursor: pointer;" class="weui-btn weui-btn_disabled weui-btn_primary">是</button></div><div style="width: 40%;"><button id="btn-no" class="weui-btn weui-btn_primary">否</button></div></div></div>')
            //点击关闭按钮
            var oClose=document.getElementById("close");
            //点击登陆框以外的区域也可以关闭登陆框
            oClose.onclick=oMask.onclick=function(){
                document.body.removeChild(oLogin);
                document.body.removeChild(oMask);
            };
        }

        function uploadFile() {
            $('#upload-file').on('change', function () {
                openNew();
                $('#login').on('click','#btn-yes' ,function () {
                    var oLogin = document.getElementById('login');
                    var oMask = document.getElementById('mask');
                    document.body.removeChild(oLogin);
                    document.body.removeChild(oMask);
                    var formData = new FormData();
                    formData.append('0', $('#upload-file')[0].files[0]);
                    $.ajax({
                        url: 'http://api.hongyanche.com/marketing_admin/video_add?z=1',
                        type: 'POST',
    xhrFields:{
    withCredentials:true
    },
                        data: formData,
                        processData: false,
                        contentType: false,
                        xhr: function () {
                            myXhr = $.ajaxSettings.xhr();
                            if (myXhr.upload) {
                                myXhr.upload.addEventListener('progress', progressHandlingFunction, false)
                            }
                            return myXhr;
                        },
                        success: function (data) {
                            if (!data.state) {
                                return alert(data.errormsg)
                            }
                            LIST.reload('#video-list');
                            $('progress').attr({value : 0});
                            $('#progress').html(' ');
                        },
                        error: function (err) {
                            return console.error(err)
                        }
                    });
                });
                // login
                $('#login').on('click','#btn-no' ,function () {
                    var oLogin = document.getElementById('login');
                    var oMask = document.getElementById('mask');
                    document.body.removeChild(oLogin);
                    document.body.removeChild(oMask);
                    var formData = new FormData();
                    formData.append('0', $('#upload-file')[0].files[0]);
                    $.ajax({
                        url: 'http://api.hongyanche.com/marketing_admin/video_add?z=0',
                        type: 'POST',
    xhrFields:{
    withCredentials:true
    },
                        data: formData,
                        xhr: function () {
                            myXhr = $.ajaxSettings.xhr();
                            if (myXhr.upload) {
                                myXhr.upload.addEventListener('progress', progressHandlingFunction, false)
                            }
                            return myXhr;
                        },
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            if (!data.state) {
                                alert(data.errormsg);
                                return;
                            }
                            LIST.reload('#video-list');
                            $('progress').attr({value : 0});
                            $('#progress').html(' ');
                        },
                        error: function (err) {
                            console.error(err)
                        }
                    })
                })
            })
        }
        uploadFile();

        $('#video-list').on('bc-list-success', function () {
            $('.js-video').each(function (index, el) {
                $(el).prev().attr({
                    src: $(el).text(),
                    controls: 'controls'
                });
                $(el).next().val($(el).text());
            });
        });

        function progressHandlingFunction(e) {
            if (e.lengthComputable) {
                $('progress').attr({value : e.loaded, max : e.total}); //更新数据到进度条
                var percent = e.loaded/e.total*100;
                $('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
            }
        }

        // 删除视频
        $('#video-list').on('click', '.delete-btn', function () {
            var vID = $(this).find('video_id').text();
            var isDelete = confirm('是否要删除该视频？');
            if (isDelete) {
                $.ajax({
                    url: 'http://api.hongyanche.com/marketing_admin/video_remove',
                    data:{
                        video_id: vID
                    },
    xhrFields:{
    withCredentials:true
    },
                    type: 'POST',
                    success: function (data) {
                        LIST.reload('#video-list');
                    }
                })
            }
        });
    })(window, undefined)
</sss>
